<template>
  <div class="horizontal">
    <van-nav-bar
      @click-left="goHome"
      title="分类"
      style="font-weight: bold"
      fixed
    >
      <template #left>
        <van-icon name="revoke" color="#fdc03a" size="20" />
      </template>
    </van-nav-bar>

    <van-notice-bar
      left-icon="volume-o"
      class="classes"
      :scrollable="true"
      text="党的二十大于2022年下半年在北京召开。开展党的二十大相关工作网络征求意见,充分彰显了以习近平同志为核心的党中央发扬民主、集思广益的优良作风"
    />

    <div
      class="card"
      @click="
        type = 1;
        $router.push(`/detailedlist?type=${type}`);
      "
    >
      <img src="../assets/cs-img/beifang.webp" alt="" />
      <p>北方秋色</p>
      <!-- <span>The northern autumn</span> -->
      <div>The northern autumn</div>
    </div>
    <div
      class="card"
      @click="
        type = 2;
        $router.push(`/detailedlist?type=${type}`);
      "
    >
      <img src="../assets/cs-img/nanfang.jpeg" alt="" />
      <p>南方美景</p>
      <div>South beauty</div>
    </div>
    <div
      class="card"
      @click="
        type = 3;
        $router.push(`/detailedlist?type=${type}`);
      "
    >
      <img src="../assets/cs-img/shenxianju.webp" alt="" />
      <p>东部风情</p>
      <div>East amorous feelings</div>
    </div>
    <div
      class="card"
      @click="
        type = 4;
        $router.push(`/detailedlist?type=${type}`);
      "
    >
      <img src="../assets/cs-img/xibei.jpeg" alt="" />
      <p>西北天地</p>
      <div>Northwest of heaven and earth</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 0,
    };
  },
  methods:{
    goHome() {
      this.$router.push("/index");
    },
  }
};
</script>

<style lang="scss" scoped>
.horizontal {
  // height: 100vh;
  .classes {
    font-weight: bold;
    margin-top: 70px;
    // margin-left: 20px;
    margin-bottom: 30px;
  }
}

.van-search {
  width: 95vw;
  margin: 0 auto;
}

.card {
  display: block;
  width: 90vw;
  position: relative;
  margin: 15px auto;
  // border: 2px solid gray;
  border-radius: 30px;
  overflow: hidden;

  > img {
    width: 100%;
    height: 22vh;
    display: block;
  }
  > p {
    font-weight: bold;
    font-size: 26px;
    position: absolute;
    top: 15px;
    left: 20px;
    color: white;
    text-shadow: 2px 2px gray;
  }
  // >span {
  //   position: absolute;
  //   top: 27px;
  //   left: 136px;
  //   color: white;
  //   text-shadow: 2px 2px gray;
  // }
  > div {
    font-size: 20px;
    position: absolute;
    top: 50px;
    left: 20px;
    color: white;
    text-shadow: 1px 1px gray;
  }
}
</style>
